<template>
	<view class="car">
		<block v-for="(item, index) in list" :key="index">
			<view class="shopName">{{ item.shop.name }}</view>
			<view class="list" v-for="(value, key) in item.goods" :key="key">
				<view class="yuan" @tap="select(key,index)">
					<image v-if="seleted == value.id" src="../../../static/yuan_s.png" mode="widthFix"></image>
					<image v-else src="../../../static/yuan.png" mode="widthFix"></image>
				</view>
				<view class="pannel">
					<view class="left"><image :src="value.thumb" mode="widthFix"></image></view>
					<view class="right">
						<view class="title">{{ value.name }}</view>
						<view class="bottom">
							<text class="money">{{ value.price }}万</text>
						</view>
					</view>
					<view class="del" @tap="del(value.id, value.type)"><image src="../../../static/del.png" mode="widthFix"></image></view>
				</view>
			</view>
		</block>
		<view class="btns"><view class="btn">去结算</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [],
			seleted: null
		};
	},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			let authData = uni.getStorageSync('authData');
			if (authData.auth) {
				this.$request
					.post('/landed/getMyCarList', {
						data: {},
						header: {
							Authorization: authData.auth
						}
					})
					.then(res => {
						this.list = res.data.data.list;
					});
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
			}
		},
		del(goods_id, type) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗',
				success: res => {
					if (res.confirm) {
						let authData = uni.getStorageSync('authData');
						this.$request
							.post('/landed/delMyCar', {
								data: {
									goods_id,
									type
								},
								header: {
									Authorization: authData.auth
								}
							})
							.then(res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
									duration: 2000
								});
								setTimeout(() => {
									this.getData();
								}, 2000);
							});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.car {
	height: 100%;
	padding-bottom: 100upx;
}
.shopName {
	background-color: #e7e7e7;
	width: 100%;
	font-size: $uni-font-size-lg;
	color: #333;
	box-sizing: border-box;
	line-height: 100upx;
	padding: 0 20upx;
}
.btns {
	box-shadow: 0 -1px 6px #ccc;
	width: 100%;
	height: 100upx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	.btn {
		width: 300upx;
		height: 100%;
		text-align: center;
		font-size: $uni-font-size-lg;
		background-color: red;
		color: #fff;
		position: absolute;
		top: 0;
		right: 0;
		line-height: 100upx;
	}
}
.list {
	width: 100%;
	box-sizing: border-box;
	position: relative;
	padding-left: 80upx;
	padding-right: 30upx;
	height: 220upx;
	margin-top: 30upx;
	.yuan {
		width: 60upx;
		height: 60upx;
		position: absolute;
		top: 50%;
		left: 10upx;
		transform: translateY(-50%);
		image {
			width: 100%;
		}
	}
	.del {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 50%;
		right: 20upx;
		transform: translateY(-50%);
		image {
			width: 100%;
			height: 100%;
		}
	}
	.pannel {
		width: 100%;
		height: 220upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		background-color: #ffffff;
		border-radius: 20upx;
		overflow: hidden;
		.left {
			width: 230upx;
			height: 220upx;
			overflow: hidden;
			image {
				height: 100%;
			}
		}
		.right {
			width: calc(100% - 320upx);
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20upx;
			line-height: 1.5em;
			font-size: $uni-font-size-base;
			color: $uni-color-subtitle;
			.title {
				font-size: $uni-font-size-lg;
				color: $uni-color-title;
				line-height: 1.5em;
				color: #333333;
			}
			.bottom {
				color: #f73366;
				font-size: $uni-font-size-lg;
				font-weight: 700;
			}
		}
	}
}
</style>
